<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content='IE=edge' charset="utf-8" />
    <!-- [REQUIRED] JQUERY SCRIPT/CSS INTEGRATION -->
    <!-- INCLUDING COMPONENT-RELATED EXTERNAL SCRIPTS -->
    <link href="../../api/css/cupertino/jquery-ui-1.10.1.custom.min.css" rel="stylesheet">
    <script src="../../api/js/jquery-1.8.3.js"></script>
    <script src="../../api/js/jquery-ui-1.10.1.custom.min.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            variable:null ,
            varname:null, //this overrides variable if set
            value:null ,
            notify: false
        };
        var f4items = [];
        window.onload = function() {
        }
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            var vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            if(vname)
            {
                BOI.loadF4Values(vname, 1, undefined, function (data) {
                    var values  = data.values;
                    var combo = $('#bi_select');
                    combo.html('<option selected value=""></option>');
                    for(var idx in  values){
                        if (values[idx].name)
                            combo.append('<option value="' + values[idx].value + '">' + values[idx].name + ': ' + values[idx].value + '</option>');
                    }
                    if(properties.value)
                        combo.val(properties.value); //default value if set
                });

                var label = $('#bi_var_name');
                label.html(vname);
                if(properties.variable)
                {
                    label.attr('title', properties.variable.description);
                    $('#bi_desc').html(properties.variable.description);
                }
            }
        };
    </script>

    <!-- COMPONENT SCRIPT -->
    <script type="text/javascript">
        $(function(){
            $('#bi_select').live('change', function(){
                properties.value = $(this).val();
            });
        });
    </script>

    <style>
        body.sapUiBody
        {
            background-color:transparent;
        }

        <!--  .bi_desc
              {
                  font-size:14px;
                  position:fixed;
                  text-align:center;
                  width:100%;
                  height:30px;
                  top:-12px;
                  text-transform:"Capitalize";
                  background-color:#ffffff;
                  z-index:10;
                  font-family : Arial, Helvetica, sans-serif;

                  left : 0 px;
              } -->

    </style>

</head>
<body>
<div id="bi_var_name"></div>
<p id="bi_desc"></p>
<select id="bi_select"></select>

</body>

</html>